import React, { Component } from 'react'
import styles from './index.module.scss'
import MyNavBar from '../../components/MyNavBar'
import { getFavorites } from '../../api'
import { AutoSizer, List } from 'react-virtualized'
import HouseItem from '../../components/HouseLtem'
export default class Favorite extends Component {
  state={
    list:[]
  }
  componentDidMount(){
    this.getFavoritesData()
  }
 async getFavoritesData(){
   const res = await getFavorites()
   this.setState({
    list: res.data.body
   })
 }
//  列表
rowRenderer=({ key, index, style })=>{
  const item = this.state.list[index]
  return (
    <div key={key} style={style}>
      <HouseItem {...item}/>
    </div>
  )
}
  render() {
    // /收藏页面
    const { list } = this.state
    return (
      <div className={styles.favorite}>
       <div  className={styles.rooms}>
         <MyNavBar>收藏列表</MyNavBar>
       </div>
        <div className={styles.list}>
          <AutoSizer>
            {({ width, height }) => {
            return <List 
                    width={width}
                    height={height}
                    rowCount={list.length}
                    rowHeight={102}
                    rowRenderer={this.rowRenderer}
                  />
            }}
          </AutoSizer>
        </div>
      </div>
    )
  }
}
